<template>
  <div class="login" id="login" v-if="urlPush == '/'">
    <div class="limiter">
      <div class="container-login100">
        <div class="wrap-login100">
          <!-- <img
            src="https://www.haixuns.com/upload/image/test/logo.png"
            class="login-bg"
          /> -->
          <img
            src="https://www.haixuns.com/portal/home/static/png/logo-042c8b80.png"
            class="login-bg"
          />
          <span class="login100-form-title" style="padding-bottom: 30px"
            >船舶智能AI监控系统</span
          >
          <!-- <span class="login100-form-title p-b-48">
            <i class="fa fa-video-camera"></i>
          </span> -->

          <div
            class="wrap-input100 validate-input"
            data-validate="Valid email is: a@b.c"
          >
            <input
              :class="'input100 ' + (username == '' ? '' : 'has-val')"
              type="text"
              v-model="username"
              name="username"
            />
            <span class="focus-input100" data-placeholder="用户名"></span>
          </div>

          <div
            class="wrap-input100 validate-input"
            data-validate="Enter password"
          >
            <span class="btn-show-pass">
              <i
                :class="'fa ' + (!showPassword ? 'fa-eye' : 'fa-eye-slash')"
                @click="showPassword = !showPassword"
              ></i>
            </span>
            <input
              :class="'input100 ' + (password == '' ? '' : 'has-val')"
              :type="!showPassword ? 'password' : 'text'"
              v-model="password"
              name="password"
            />
            <span class="focus-input100" data-placeholder="密码"></span>
          </div>

          <div class="container-login100-form-btn">
            <div
              class="wrap-login100-form-btn"
              :class="{ 'login-loading': isLoging }"
              v-loading="isLoging"
              element-loading-background="rgb(0 0 0 / 0%);"
              element-loading-custom-class="login-loading-class"
            >
              <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn" @click="login">登录</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crypto from "crypto";
import userService from "./service/UserService";
export default {
  name: "Login",
  data() {
    return {
      isLoging: false,
      showPassword: false,
      loginLoading: false,
      username: "",
      password: "",
      urlPush: "/",
    };
  },
  created() {
    var that = this;
    // 获取url地址
    let url = window.location.href;
    let urlArr = url.split("admin=");
    if (urlArr.length > 1) {
      that.username = "admin";
      that.password = "admin";
      that.login();
      that.urlPush = "/" + urlArr[1];
    }
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key == 13) {
        that.login();
      }
    };
  },
  methods: {
    //登录逻辑
    login() {
      if (this.username != "" && this.password != "") {
        this.toLogin();
      }
    },

    //登录请求
    toLogin() {
      //需要想后端发送的登录参数
      let loginParam = {
        username: this.username,
        password: crypto
          .createHash("md5")
          .update(this.password, "utf8")
          .digest("hex"),
      };
      var that = this;
      //设置在登录状态
      this.isLoging = true;
      let timeoutTask = setTimeout(() => {
        that.$message.error("登录超时");
        that.isLoging = false;
      }, 1000);

      this.$axios({
        method: "get",
        url: "/api/user/login",
        params: loginParam,
      })
        .then(function (res) {
          window.clearTimeout(timeoutTask);
          console.log(res);
          console.log("登录成功");
          if (res.data.code === 0) {
            userService.setUser(res.data.data);
            //登录成功后
            that.cancelEnterkeyDefaultAction();
            that.getLoginUser();
          } else {
            that.isLoging = false;
            that.$message({
              showClose: true,
              message: "登录失败，用户名或密码错误",
              type: "error",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          window.clearTimeout(timeoutTask);
          that.$message.error(error.response.data.msg);
          that.isLoging = false;
        });
    },
    // 获取当前登陆人信息
    getLoginUser() {
      const that = this;
      that
        .$axios({
          method: "get",
          url: "/api/user/get-login-user",
        })
        .then(function (res) {
          if (res.data.code == 0) {
            localStorage.setItem("userInfo", JSON.stringify(res.data.data));
            if (res.data.data.role.id != 1) {
              that.$router.push(`/DataScreenLayout/1`);
              return;
            }
            that.$router.push(that.urlPush);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    cancelEnterkeyDefaultAction: function () {
      document.onkeydown = function (e) {
        var key = window.event.keyCode;
        if (key == 13) {
          return false;
        }
      };
    },
  },
};
</script>
<style scoped>
.container-login100 {
  background-image: url("../assets/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.wrap-login100 {
  width: 20vw;
  padding-bottom: 60px;
  position: relative;
}

.login100-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: #21d4fd;
  background: -webkit-linear-gradient(
    right,
    #21d4fd,
    #83d2ff,
    #21d4fd,
    #83d2ff
  );
  background: -o-linear-gradient(right, #21d4fd, #83d2ff, #21d4fd, #83d2ff);
  background: -moz-linear-gradient(right, #21d4fd, #83d2ff, #21d4fd, #83d2ff);
  background: linear-gradient(right, #21d4fd, #83d2ff, #21d4fd, #83d2ff);
}

.login-bg {
  position: absolute;
  width: 120px;
  top: 40px;
  left: 40px;
}
</style>
